<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      
    </div>

    <script src="/xvni/bundle.js"></script>
    <script>
      let container=document.getElementById("container");
      let templateStr1 = `
               <ul class="abc">
                {{#arr}}
                  <li>{{id}}</li>
                      {{#arr2}}
                            <li>{{name}}</li>
                            {{#arr3}}
                            <li>{{age}}</li>
                            {{/arr3}}
                      {{/arr2}}
                  <li>{{id2}}</li>
                {{/arr}}
                {{#arr4}}
                <li>{{.}}</li>
                {{/arr4}}
                </ul>
                `
      let data1 = {
        arr: [
          { id: '小明', arr2: [{ name: "喜欢唱歌", arr3: [{ age: '一等奖' }] }], id2: 1 },
          { id: '小红', arr2: [{ name: "喜欢跳舞", arr3: [{ age: '二等奖' }] }] , id2: 2 },
        ],
        arr4: [11,22],
      }
      let templateStr2='我爱{{name}}，喜欢{{a.b.c}}岁的'
      let data2={
        name:'zs',
        a:{
          b:{
            c:22
          }
        }
      }
     let domStr= Mustache.render(templateStr1, data1)
     console.log("domStr",domStr)
     container.innerHTML=domStr
    </script>
  </body>
</html>
